1
00:00:00,930 --> 00:00:04,320
Hello and welcome to this lecture in this lecture.

2
00:00:04,320 --> 00:00:10,580
We will be creating the functionality for our digital clock.

3
00:00:11,160 --> 00:00:11,540
Okay.

4
00:00:11,550 --> 00:00:16,530
So this is where I will implement the code for the digital clock.

5
00:00:16,530 --> 00:00:21,400
The first line of code here is this set interval function.

6
00:00:21,450 --> 00:00:28,620
This method here is medart is what is used to keep the clock running.

7
00:00:28,860 --> 00:00:31,360
So it is used to call the clock continuously.

8
00:00:31,380 --> 00:00:32,760
It will keep the clock.

9
00:00:32,800 --> 00:00:36,350
It kinda like starts the engine and keeps it running.

10
00:00:36,390 --> 00:00:41,270
It's like a car is the ignition if you like for the clock.

11
00:00:41,400 --> 00:00:45,910
So this will keep it running as long as the active hold.

12
00:00:45,920 --> 00:00:56,670
The browser window is opened so inside this function here here we all define variables and other stuff

13
00:00:56,760 --> 00:00:59,910
that the club all need to run.

14
00:01:00,360 --> 00:01:04,800
So the first thing here we are online to here.

15
00:01:04,800 --> 00:01:09,940
Define a variable called corrent time where you create variables.

16
00:01:09,960 --> 00:01:13,170
Is good to name them appropriately so.

17
00:01:13,200 --> 00:01:20,070
To define a variable you type in a V are followed by the name of the variable and then use it equal

18
00:01:20,220 --> 00:01:30,470
to to assign a value to the variable in the value of A for variable is equal to a new date.

19
00:01:30,660 --> 00:01:34,600
This new date method is an object.

20
00:01:34,620 --> 00:01:37,410
You said Date object in javascript.

21
00:01:37,430 --> 00:01:40,840
It is what is used to define a.

22
00:01:41,220 --> 00:01:49,680
So when you use this object this new date it will create a new date object which will include the current

23
00:01:49,680 --> 00:01:52,840
date and time.

24
00:01:52,840 --> 00:01:59,990
I have created some other variables here from Line 3 to 6.

25
00:02:00,060 --> 00:02:03,350
Again this variable here online 3 is call.

26
00:02:03,380 --> 00:02:06,270
I have called it hours and what it will do.

27
00:02:06,290 --> 00:02:13,550
It is a variable that will use to display the current time so it will check the current time and just

28
00:02:13,620 --> 00:02:14,570
display.

29
00:02:14,640 --> 00:02:16,130
Get the hours.

30
00:02:16,170 --> 00:02:23,600
So when we want to post 5 hours this is the method we will use to get ours life for here.

31
00:02:23,670 --> 00:02:27,130
Same thing is what will use to display the minutes.

32
00:02:27,270 --> 00:02:32,460
So each tool referenced the current time object and then use this.

33
00:02:32,490 --> 00:02:36,270
Get this method to get all the minutes.

34
00:02:36,270 --> 00:02:43,160
Same thing will load 5 to reference this object and get to seconds.

35
00:02:43,210 --> 00:02:49,860
So this method or method here is these ones here call end time Doc.

36
00:02:49,900 --> 00:02:51,140
How's Coron time.

37
00:02:51,240 --> 00:02:58,690
Get menus and get seqence there or have us group of gifts that will get the relevant this will get ours

38
00:02:58,840 --> 00:03:00,340
this will get the minutes.

39
00:03:00,400 --> 00:03:10,320
This will get the second line 6 is a variable that will determine if the clock is in or if the clock

40
00:03:10,470 --> 00:03:16,710
is P.M. so to determine that will need to use some if statements.

41
00:03:17,340 --> 00:03:19,730
Okay I've added some more chunk of code here.

42
00:03:19,740 --> 00:03:28,710
So from line 7 to like 8 in there is some if statements there to determine if the clock should display

43
00:03:28,710 --> 00:03:30,730
in M or P.

44
00:03:30,930 --> 00:03:38,830
So Line 7 years is if there were specifying the conditions for a to b or P. M. were saying that if the

45
00:03:38,970 --> 00:03:47,000
hours is greater than or less than 12 then the period will be p. m..

46
00:03:47,110 --> 00:03:48,880
Which is this not this line 6 here.

47
00:03:48,880 --> 00:03:52,400
This variable here it will display it will display.

48
00:03:52,400 --> 00:03:53,280
P. M. C..

49
00:03:53,320 --> 00:04:01,360
If the hours is greater than or equal to twelfth the period will be p. m..

50
00:04:01,700 --> 00:04:12,600
Or if the hours is less than 12 the hours here will be was 2 hours minus 12.

51
00:04:12,870 --> 00:04:13,690
Again here.

52
00:04:13,810 --> 00:04:21,180
This second is less than 10 seconds here will be zero bloss seconds.

53
00:04:21,490 --> 00:04:24,010
Okay so that's well defined the second.

54
00:04:24,060 --> 00:04:30,470
Again like 16 if the minutes is less than 10 minutes would be equal to zero.

55
00:04:30,570 --> 00:04:34,160
Plus the minutes that the clock is displayed.

56
00:04:34,200 --> 00:04:42,060
Notice it will be dirac getting all this information from the local computer so whatever time the local

57
00:04:42,060 --> 00:04:46,870
computer has this play and that's where it will pick the data from.

58
00:04:47,670 --> 00:04:48,370
Okay.

59
00:04:48,400 --> 00:04:55,620
I added some more could hear from line 19 here.

60
00:04:55,810 --> 00:04:59,670
So line 19 are defined on a variable called a clock time.

61
00:05:00,090 --> 00:05:03,400
And giving it a value of ours.

62
00:05:03,600 --> 00:05:11,790
Plotz You notice here this is a column that would show for example we'll show twelve oclock.

63
00:05:12,180 --> 00:05:16,290
Then this colon Plus the minutes plus the seconds.

64
00:05:16,290 --> 00:05:25,350
So this is the clog time variable and it will pick up this house here kloss was his display the hours

65
00:05:25,370 --> 00:05:32,880
it will now display this out plus 10 minutes and then it will displayed his cologne pics of the scans

66
00:05:32,910 --> 00:05:40,530
and then displays to Seconds plosser to Pyrate dipiero means if this period here is it will display

67
00:05:40,540 --> 00:05:41,150
it.

68
00:05:41,350 --> 00:05:45,960
If he's happy to display p.m. notice all these are all variable.

69
00:05:45,960 --> 00:05:51,670
So if we look up here we define the viro but they are online says cord period.

70
00:05:51,720 --> 00:05:54,890
There's a variable called second variable called how.

71
00:05:54,900 --> 00:06:03,780
So all these are variable values that we've already defined that this line 19 variable will use line

72
00:06:03,810 --> 00:06:11,580
21 here that you've defined on a variable variable college clock and this clock will be we'll going

73
00:06:11,580 --> 00:06:16,770
to use a javascript method as says documents get elemental by D.

74
00:06:17,070 --> 00:06:22,870
The idea here is the clock which will define if I flick over to the highest email document here.

75
00:06:23,070 --> 00:06:27,420
So does the email we've got and Heidi called clock.

76
00:06:27,480 --> 00:06:30,420
So this is the idees talking about it all.

77
00:06:30,420 --> 00:06:34,190
Grab this idea and inject D.J of us.

78
00:06:34,190 --> 00:06:41,600
Group code inside this div So in that once it does that it will display the correct clock.

79
00:06:41,610 --> 00:06:50,130
That's what that document kit really meant by Heidi means so it will grab that idea from that div and

80
00:06:50,190 --> 00:06:53,960
inject this here which is the javascript code.

81
00:06:54,090 --> 00:07:03,240
It will inject the clock time the current time of the clock and clock dot in that text so any text that

82
00:07:03,270 --> 00:07:09,520
is showing it all display that is replaced with this comment current clock time.

83
00:07:09,670 --> 00:07:11,550
This here is the interval.

84
00:07:11,550 --> 00:07:15,870
It will do that every millisecond So this is the interval.

85
00:07:15,900 --> 00:07:24,120
It will take is in milliseconds so every milliseconds it will keep running and it will display the look.

86
00:07:24,300 --> 00:07:34,080
Okay so that's basically all the javascript required to get the clock running.

87
00:07:34,230 --> 00:07:38,550
Make sure you have your semicolons specified in the right order.

88
00:07:38,550 --> 00:07:40,480
If not it will not work.

89
00:07:40,710 --> 00:07:46,470
So if I save this code refresh the clock page

90
00:07:49,400 --> 00:07:51,530
so this is a club to refresh this.

91
00:07:51,530 --> 00:07:57,290
Hopefully the clocks should show case not showing them must be something wrong.

92
00:07:57,290 --> 00:08:01,110
So let's go both a case of refresh.

93
00:08:01,110 --> 00:08:04,830
Now the clock is working as it should.

94
00:08:05,070 --> 00:08:07,290
So you should have yours taken over.

95
00:08:07,290 --> 00:08:07,940
If it isn't.

96
00:08:07,940 --> 00:08:15,900
Just look through your code again and make sure that or these semicolons are in place.

97
00:08:15,960 --> 00:08:19,590
If there's any issues please let me know.

98
00:08:19,590 --> 00:08:21,350
So let's see it for this project.

99
00:08:21,360 --> 00:08:27,300
In this projet we have successfully implemented a digital clock.

100
00:08:27,300 --> 00:08:28,710
Thanks for your time.

101
00:08:28,710 --> 00:08:29,860
Bye for now.